<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wrapper{
				position:relative;
				width:118px;
				height:118px;
				overflow:hiden;
			}
			#content{
				position:absolute;
				left:0;
				bottom:-28px;
				width:100%;
				height:28px;
				line-height:28px;
				font-family:宋体;
				text-align:center;
				background-color:rgb(0,0,0,0.7);
				color:white;
			}
		</style>
		<script type="text/javascript" src="../../jQuery/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#wrapper").hover(function(){
					if(!$("#content",this).is(":animated"))
					{
						$("#content",this).animate({"bottom":"0px"},200);
					}
				},function(){
					if(!$("#content",this).is(":animated"))
					{
						$("#content",this).animate({"bottom":"-28px"},200);
					}
				})
			})
		</script>
	</head>
	<body>
		<div id="wrapper">
			<img src="../站酷.png" alt="">
			<div id="content">站酷图标</div>
		</div>
	</body>
</html>
